<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			td {
				background-color: #000000;
			}
		</style>

	</head>

	<body>
		<table border="" cellspacing="" cellpadding="" width="300px" height="300px">
			<tbody id="tbo">
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<!--<td></td>
					<td></td>-->
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<!--<td></td>
					<td></td>-->
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<!--<td></td>
					<td></td>-->
				</tr>
				<!--<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>-->
			</tbody>
		</table>
		<script type="text/javascript">
			window.onload = function() {
				var ww = document.getElementsByTagName("td");
				for (var i = 0; i < ww.length; i++) {
					ww[i].onclick = changeColor;
				}

				function changeColor() {
					var r = this.parentNode.rowIndex;
					var s = this.cellIndex;
					for (var i = 0; i < ww.length; i++) {
						if (ww[i].cellIndex == s || ww[i].parentNode.rowIndex == r) {
							var huan = document.defaultView.getComputedStyle(ww[i], null).backgroundColor;
							if (huan == "rgb(0, 0, 0)") {
								ww[i].style.backgroundColor = "#FFFFFF";
							} else {
								ww[i].style.backgroundColor = "#000000";
							}
						}
					}
					yanzheng();
				}

				function yanzheng() {
					var rr = 0;
					var tds = document.getElementsByTagName("td");
					for (var i = 0; i < tds.length; i++) {
						var huan = document.defaultView.getComputedStyle(tds[i], null).backgroundColor;
						if (huan == "rgb(0, 0, 0)") {
							rr = 1;
							break;
						}
					}
					if (rr == 0) {
						alert("恭喜过关")
						jixu();
					}
				}
				//下一关			
				function jixu() {
					var trs = document.getElementsByTagName("tr");
					var tr = document.createElement("tr");
					var tbo = document.getElementById("tbo");
					var tds = document.getElementsByTagName("td");
					//将所有格子变黑色
					for (var i = 0; i < tds.length; i++) {
						tds[i].style.backgroundColor = "#000000";
					}
					//每行里添加一个td
					for (var i = 0; i < trs.length; i++) {
						var td = document.createElement("td");
						td.onclick = changeColor;
						trs[i].appendChild(td);
					}
					//行追加td后的列数 
					console.log(trs[0]);
					var tds = trs[0].getElementsByTagName("td");
					tbo.appendChild(tr); //像tbody里追加一行
					//向此行里添加td
					for (var i = 0; i < tds.length; i++) {
						var td = document.createElement("td");
						td.onclick = changeColor;
						tr.appendChild(td);
					}					
				}
			}
		</script>
	</body>

</html>